<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flex Demo</title>
    <link rel="stylesheet" href="css/debug.css">
    <style>
        .box {
            margin: 2rem;
            display: flex;
            /* flex-direction: row-reverse; */
            /* flex-wrap: wrap; */
            flex-flow: row wrap;
            align-items: stretch;
            align-content: stretch;
        }

        .boxa {
            border: 1px solid black;
        }

        body {
            /* max-width: 940px; */
            margin: 40px;
        }


        .wrapper {
            max-width: 940px;
            padding: 2rem;
            margin: 0 auto;
            /* grid-gap 设置对子项有效 */
            grid-gap: 10px;
            
            display: grid;
            flex-wrap: wrap;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-auto-rows: minmax(50px, auto);
        }

        .header {
            /* flex: 0 1 100%; */
            grid-column: 1 / -1;
        }

        /* .panel {
            flex: 1 1 200px;
            margin-left: 5px;
            margin-right: 5px
        } */

        .tall-panel {
            grid-row-end: span 2
        }

        .main{
            display: flex;
            background-color: crimson;
            min-height: 50vh;
            width: 600px;
        }

        /* flex:1 demo */
        aside{ width: 200px;background-color: cornflowerblue;}
        aside:last-of-type{flex:1}
        main{margin-left: 20px;
            flex: 0.5 /*弹性系数:指所占的比例，0.5:1=1:2,即1+2=3，此时剩余空间总分为3等份*/
        }
    </style>
</head>

<body>
    <h1>弹性布局:Flex 案例</h1>

    <div class="wrapper">
        <div class="header">Header</div>
        <div class="panel">panelA</div>
        <div class="panel">panelB</div>
        <div class="panel tall-panel" style="grid-row-end:span 4">panelC: grid-row-end:span 4</div>
        <div class="panel">panelD</div>
        <div class="panel">panelE</div>
        <div class="panel tall-panel">panelF: grid-row-end: span 2</div>
        <div class="panel tall-panel">panelG: grid-row-end: span 2</div>
        <div class="panel" style="grid-column-end:span 1">panelH</div>
        <div class="panel">panelI</div>
        <div class="panel">panelJ</div>
        <div class="panel">panelK</div>
        <div class="panel">panelL</div>
        <div class="panel" style="grid-column-end:span 3">panelM: grid-column-end:span 3</div>
        <div class="panel">panelN</div>
    </div>

    <div class="box">
        <div class="boxa" style="width:200px;height: 10px;order: 2">1: order:2,默认order为0</div>
        <div class="boxa" style="width:150px;height: 80px;">2</div>
        <div class="boxa" style="width:10px;height: 10px;flex-grow: 1">3</div>
        <div class="boxa" style="width:900px;height: 100px;order: -1;flex-shrink: 5">4</div>
        <div class="boxa" style="width:120px;height: 30px">5</div>
    </div>

    <div class="main">
        <aside>Sidebar</aside>
        <main>flex:0.5(剩余空间的一半)</main>
        <aside>Sidebar</aside>
    </div>


    <div class="path">.path element</div>
    <div id="path">#path element</div>

    <path>path</path>
    <g>g</g>

    <img src="../images/2.jpg" width="100" height="100" alt="">
</body>

</html>